<template>
	<div id="essayBody">
		<el-divider></el-divider>
		<div style="margin:10px;">
			<div style="text-align:center;font-size:20px;margin:10px">
				留言板
			</div>
			<el-form ref="form" label-width="80px">
				<el-input type="textarea" :autosize="{ minRows: 3, maxRows: 6}"	
					placeholder="给博主的话" v-model="content" style="margin-bottom: 10px;"></el-input>
				<el-form-item style="text-align:right;">
					<el-button round size="mini" type="primary" @click="onSubmit()">发布</el-button>
				</el-form-item>
			</el-form>
		</div>

		<div style="display: flex;justify-content: space-between;" v-for="data in guestbookData">
			<div style="margin: 10px;">
				<el-avatar :size="60" :src="data.imgurl"></el-avatar>
			</div>
			<div class="allcomment">
				<div> 
					<h6 style="margin: 10px;"><el-link :underline="false"><i class="el-icon-s-custom"></i> {{data.username}}:</el-link></h6>
				</div>
				<div style="margin-left: 30px;">
					<h4 style="margin: 10px;font-family:NSimSun;">{{data.content}}</h4>
				</div>
				<div style="display: flex;justify-content: space-between;">
					<span style="text-align：left;font-size: smaller;margin: 10px;"><i class="el-icon-time"></i> {{data.createTime|moment("YYYY年MM月DD日 HH:mm")}} </span>
				</div>
			</div>
		</div>
		<el-divider></el-divider>
		<nav style="text-align: center">
              <!-- <span class="demonstration">完整功能</span> -->
              <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="size"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
              >
              </el-pagination>
            </nav>
	</div>
</template>

<script>
export default {
	data() {
		return {
			loginUser:'',
			content: '',
			imgurl:"https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png",
			guestbookData: [],
			currentPage: 1, // 分页 当前页
			size: 5, // 分页  大小
			total: 0, // 分页  总数
		}
	},
	created() {
		this.loginUser = sessionStorage.getItem('loginUser');
		this.getData();
	},
	methods: {
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.size=val;
			this.getData();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage=val;
			this.getData();
		},
		getData(){
			console.log("进入guest")
			this.axios.get(`http://120.77.213.195:8001/guest/getData?page=${this.currentPage}&size=${this.size}`).then((response)=>{
				console.log(response)
				if(response.data.code == 0){
					this.guestbookData = response.data.guestbooks;
					this.total = response.data.total;
				}
			});
		},
		onSubmit(){
			var data = {
				username: this.loginUser,
				content: this.content,
			}
			if(this.loginUser != '' && this.content != ''){
				this.axios.post(`http://120.77.213.195:8001/guest/save`,data).then((response) => {
					console.log("响应：")
					console.log(response);
					if(response.data.code ==0){
						this.$message('评论成功');
						this.$router.go(0);
					}
				});
			}else if(this.loginUser == ''){
				this.$message.error('请登录，再评论');
			}else if(this.content == ''){
				this.$message('消息不能为空');
			}
		},
	},
}
</script>

<style>
#essayBody{
	margin: 10px 10%;
}
.allcomment{
	border:1px solid rgb(99, 218, 248);
	border-radius: 8px;
	margin: 10px;
	width: 90%;
	
}
</style>